<template>
    <div class="storeview">
        <div class="main">
            <div class="storeHeader">
                <div class="storeinfo">
                    <img :src="store.face" />
                    <div>
                        <div style="font-size:25px;color:#fff;font-weight:600;margin:10px 20px">{{ store.storename }}
                        </div>
                        <div class="briefly">
                            <b>简介： </b>{{ store.briefly }}
                        </div>
                    </div>
                </div>
                <div class="founderinfo">
                    <div style="display:flex;align-items:center">
                        <img :src="store.founderface" style="margin-right:5px" />
                        <a @click="$router.push(`/userinfo/${store.founderid}`)">{{ store.foundername }}</a>
                    </div>
                    <el-button type="primary" v-if="!hasjoin" @click="joinstore">加入知识库</el-button>
                    <el-button disabled v-else><i class="el-icon-check"></i>&ensp;已加入</el-button>
                </div>
            </div>
            <el-tabs v-model="activeName" size="medium" type="card" style="margin:20px;">
                <el-tab-pane label="最近动态" name="state">
                    <articlepage :storeid="$route.params.id" />
                </el-tab-pane>
                <el-tab-pane label="库空间" name="document">
                    <storefile :hasjoin="hasjoin"/>   
                </el-tab-pane>
            </el-tabs>

        </div>
        <div class="right">
            <div class="right-title">库成员：{{storeMember.length }}</div>
            <li v-for="s in storeMember" :key="s.id" class="member" :id="s.id"
                @click="$router.push('/userinfo' + s.id)">
                <div style="display:flex;align-items:center;margin-left:20px">
                    <img :src="s.face" style="width:40px;height:40px;border-radius:50%;margin-right:5px" />
                    <div style="font-size:14px;width:130px;">{{ s.username }}</div>
                </div>
                <div style="padding:0 10px">
                    <img src="../assets/img/皇冠.png" v-if="s.isfounder" style="width:25px;height:25px;"/>
                    <i v-else class="el-icon-user-solid"></i>
                </div>

            </li>
        </div>
    </div>
</template>
<script>
import { getcatebyid, joinStore, getStoreMember } from '../api/api'
import articlepage from '../components/article/article.vue'
import storefile from '../components/store/storefile.vue'
export default {
    name: 'storeview',
    components: {
        articlepage,
        storefile
    },
    created() {
        getcatebyid(this.$route.params.id).then(res => {
            this.store = res.data.data[0];
        })
        getStoreMember(this.$route.params.id).then(res => {
            this.storeMember = res.data.data;
            let tmp = this.storeMember.find(item => item.id == this.user.id);
            this.hasjoin = tmp ? true : false;
        })
    },
    methods: {
        joinstore() {
            joinStore(this.$route.params.id).then(res => {
                if (res.data.code == 200) {
                    this.$message.success('加入该库成功');
                    this.hasjoin = true;
                    getStoreMember(this.$route.params.id).then(res=>{
                        this.storeMember = res.data.data;
                    })
                }
            })
        },
    },
    data() {
        return {
            user: JSON.parse(window.sessionStorage.getItem('user')),
            store: {},
            storeMember: [],
            hasjoin: false, //是否已加入，
            activeName:'state'
        }
    }
}
</script>

<style scoped="scoped">

.el-icon-user-solid {
    color: #6ca7ff;
    font-size: 20px;
}

.main {
    flex: 1;
    min-width: 900px;
    margin: 0 20px 10px 10px;
    height: 100%;
    min-height: 600px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.storeview {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 100%;
}

.storeHeader {
    height: 250px;
    background-image: url(../assets/img/bk.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;

}

.storeinfo {
    margin: 50px 80px 20px;
    display: flex;
}

.storeinfo img {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    border: 2px dashed #fff;
}

.founderinfo {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    margin-top: 40px;
    font-size: 14px;
    color: #fff;
}

.founderinfo img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.briefly {
    font-size: 14px;
    color: #e5e5e5;
    margin: 0 20px;
    width: 400px;
}

.right {
    min-width: 250px;
    height: 600px;
    box-shadow: 0 5px 10px rgba(212, 212, 212, 0.5);
    background: #fff;
    padding: 10px 0;
    margin-top: 10px;
    margin-right: 10px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.right-title {
    color: rgb(45, 44, 44);
    padding: 10px;
    margin: 0px 10px;
    font-size: 13px;
    border-bottom: 1px solid #e5e6eb;
}

li {
    list-style-type: none;
    cursor: pointer;
}

li:hover {
    background: rgb(226, 240, 253);
}

.member {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>